<template>
  <div>
    <div class="map" ref="homeMap"></div>
  </div>
</template>
<script>
import echarts4 from "echarts4";
import yb from "./map.json";
export default {
  components: {},
  data() {
    return {
      mapChart: null
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      if (this.mapChart) {
        this.mapChart.dispose();
      }
      echarts4.registerMap("yb", yb);
      this.mapChart = echarts4.init(this.$refs.homeMap);
      //将地区名、坐标、要展示的数据封装起来
      var data = [
        {
          name: "除渣场",
          value: 100 //扩散的大小
        },
        {
          name: "消纳场",
          value: 100
        }
      ];
      var geoCoordMap = {
        除渣场: [106.68, 29.71],
        消纳场: [106.78, 29.82]
      };
      var convertData = function(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name, //获取该地区的名字
              value: geoCoord.concat(data[i].value) //获取该地区要展示的数据
            });
          }
        }
        return res;
      };
      let option = {
        geo: {
          map: "yb",
          aspectScale: 0.95,
          zoom: 1,
          roam: false,
          itemStyle: {
            normal: {
              borderColor: "#3c8cf3",
              borderWidth: 2,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 3.2,
                colorStops: [
                  { offset: 0, color: "#01214b" },
                  { offset: 1, color: "rgb(100,176,245)" }
                ]
              },
              shadowColor: "#1f4173",
              shadowOffsetX: 0,
              shadowOffsetY: 20
            },
            emphasis: {
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 3.2,
                colorStops: [
                  { offset: 0, color: "#01214b" },
                  { offset: 1, color: "rgb(100,176,245)" }
                ]
              },
              borderWidth: 1,
              color: "green",
              label: {
                show: false
              }
            }
          }
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            data: convertData(data),
            symbolSize: 12,
            showEffectOn: "render",
            rippleEffect: {
              period: 3,
              scale: 5,
              brushType: "fill"
            },
            hoverAnimation: true,
            itemStyle: {
              normal: {
                color: "#3E8EF7"
              }
            },
            label: {
              //是否显示地图上的文字
              formatter: "{b}",
              position: "right",
              show: true
            }
          },
          {
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 7 //图标大小
            },
            lineStyle: {
              normal: {
                color: "#1DE9B6",
                width: 2, //线条宽度
                opacity: 0.1, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              }
            },
            data: [
              {
                coords: [[106.68, 29.71], [106.78, 29.82]],
                lineStyle: { color: "#4ab2e5" }
              }
            ]
          }
        ]
      };
      this.mapChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
.map {
  width: 1000px;
  height: 750px;
  margin: auto;
}
@media only screen and (max-width: 1366px) {
  .map {
    width: 420px;
    height: 500px;
    margin: auto;
  }
}
</style>
